<template>
	<view class="content ">
		<view v-if="isShow" :style="'left:'+(moveX == 0 & x>0? x+'%':moveX+'px')+';top:'+(moveY == 0 & y>0? y+'%':moveY+'px')"
			class="touch iconfont icon-icon-fanhuizhuliebiao" @touchstart="drag_start" @touchmove.prevent="drag_hmove"
			mode="aspectFit">
		</view>
		<view v-else :style="'left:'+(moveX == 0 & x>0? x+'%':moveX+'px')+';top:'+(moveY == 0 & y>0? y+'%':moveY+'px')"
			class="touch iconfont icon-icon-fanhuizhucaidan" @touchstart="drag_start" @touchmove.prevent="drag_hmove"
			mode="aspectFit">
		</view>
	</view>
</template>

<script>
	export default {
		//悬浮球绝对位置百分比，页面刷新会回到这个位置
		props: {
			x: {
				type: Number,
				default: 78
			},
			y: {
				type: Number,
				default: 92
			},
			image: {
				type: String,
				default: ''
			},
			isShow:{
				type: Boolean,
					default: ''
			}
			
		},
		data() {
			return {
				start: [0, 0],
				moveY: 0,
				moveX: 0,
				windowWidth: '',
				windowHeight: '',
			}
		},
		onShow() {
			//获取系统分辨率
			const {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync();
			this.windowWidth = windowWidth
			this.windowHeight = windowHeight
		},
		methods: {
			drag_start(event) {
				// this.start[0] = event.touches[0].clientX - event.target.offsetLeft;
				// this.start[1] = event.touches[0].clientY - event.target.offsetTop;
			},
			drag_hmove(event) {
				// let tag = event.touches;
				// if (tag[0].clientX < 0) {
				// 	tag[0].clientX = 0
				// }
				// if (tag[0].clientY < 0) {
				// 	tag[0].clientY = 0
				// }
				// if (tag[0].clientX > this.windowWidth) {
				// 	tag[0].clientX = this.windowWidth
				// }
				// if (tag[0].clientY > this.windowHeight) {
				// 	tag[0].clientY = this.windowHeight
				// }
				// this.moveX = tag[0].clientX - this.start[0];
				// this.moveY = tag[0].clientY - this.start[1];
			},
			// Jump(){
			// 	if(this.isShow){
			// 		uni.redirectTo({
			// 			url:'../hospitallist/index'
			// 		})
			// 	}else{
			// 		uni.redirectTo({
			// 			url:'../patient/index'
			// 		})
			// 	}
			// }
		}
	}
</script>

<style>
	@import url("../../assets/iconfont/iconfont.css");

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
	}

	.touch {
		position: fixed;
		right: 20px;
		bottom: 20px;
		line-height: 45px;
		text-align: center;
		border-radius: 50%;
		color: #fff;
		font-size: 30px;
		/* 去除标签点击事件高亮效果 */
		-webkit-tap-highlight-color: transparent;
		width: 60px;
		height: 60px;
		background: #7AD9DF;
		box-shadow: 0px 1px 10px 2px rgba(32, 139, 146, 0.6);
		z-index: 2;
	}

	.content .iconfont {
		/* position: absolute; */
		top: 50%;
		right: 5px;
		font-size: 20px;
		transform: translateY(-50%);
		color: #B8B8B8;
	}
	::v-deep .icon-icon-fanhuizhucaidan:before{
		font-size: 36px;
		text-align: center;
		line-height: 61px;
		color: #FFFFFF;
	}
	::v-deep .icon-icon-fanhuizhuliebiao:before{
		font-size: 36px;
		text-align: center;
		line-height: 61px;
		color: #FFFFFF;
	}
</style>
